<template>
  <d2-container better-scroll>
    <el-card shadow="never" class="d2-mb">
      <el-form
        class="filter-container"
        ref="searchData"
        :model="searchData"
        label-width="85px"
        style="height: 30px"
      >
        <el-row :gutter="20">
          <el-col :span="5">
            <el-form-item label="策略名称">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.strategy_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="策略ID">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.strategy_id"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="品名">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="部门名称">
              <el-input
                placeholder="请输入内容"
                v-model="searchData.depart_name"
                clearable
              >
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="策略类型">
              <el-select
                v-model="searchData.strategy_type"
                placeholder="请选择"
                style="width: 100%"
                clearable
                @change="clearType()"
              >
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
                <!-- <el-option label="现货期货套期" value="1"></el-option>
                <el-option label="现货现货套期" value="2"></el-option>
                <el-option label="现货期权套期" value="3"></el-option>
                <el-option label="期货期货套利" value="4"></el-option>
                <el-option label="现货单边" value="5"></el-option>
                <el-option label="期货单边" value="6"></el-option> -->
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="策略目的">
              <el-select
                v-model="searchData.strategy_objective"
                placeholder="请选择"
                style="width: 100%"
                clearable
              >
                <el-option label="期货套利" value="1"></el-option>
                <el-option label="期现套利" value="2"></el-option>
                <el-option label="套期保值" value="3"></el-option>
                <el-option label="其他" value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="1" style="margin: 5px 20px 0 0">
            <el-button type="primary" size="mini" @click="search">
              <d2-icon name="search" /> 查询
            </el-button>
          </el-col>
          <el-col :span="1" style="margin-top: 5px">
            <el-button type="default" size="mini" @click="check">
              <d2-icon name="search" />
              查看
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
    <el-card shadow="never" class="d2-mb">
      <el-table
        :data="tableData"
        border
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
        highlight-current-row
        @row-click="handleSelectionChange"
      >
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="status" label="状态" sortable></el-table-column>
        <el-table-column
          prop="org_name"
          label="机构名称"
          sortable
          :formatter="orgFormat"
        ></el-table-column>
        <el-table-column
          prop="depart_name"
          label="部门名称"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_name"
          label="策略名称"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_id"
          label="策略ID"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_type"
          label="策略类型"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_objective"
          label="策略目的"
          sortable
        ></el-table-column>
        <el-table-column
          prop="max_occupation_funds"
          label="最大占用资金"
          sortable
        ></el-table-column>
        <el-table-column
          prop="loss_limit"
          label="损失限额"
          sortable
        ></el-table-column>
        <el-table-column
          prop="profit_expectation"
          label="预期盈利"
          sortable
        ></el-table-column>
        <el-table-column
          prop="risk_profit_ratio"
          label="风险利润比"
          sortable
        ></el-table-column>
        <el-table-column
          prop="expected_return_on_investment"
          label="预期投资回报"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_hierarchy"
          label="策略层级"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_formulate_date"
          label="策略制定日期"
          sortable
        >
          <template slot-scope="scope">{{
            scope.row.strategy_formulate_date | dateYMDHMSFormat
          }}</template></el-table-column
        >
        <el-table-column
          prop="strategy_start_date"
          label="策略开始日期"
          sortable
        ></el-table-column>
        <el-table-column
          prop="strategy_end_date"
          label="策略结束日期"
          sortable
        ></el-table-column>
        <el-table-column
          prop="creator_name"
          label="申请人"
          sortable
        ></el-table-column>
      </el-table>
    </el-card>
    <el-button
      type="primary"
      size="mini"
      style="float: right; margin-left: 10px"
      @click="chose"
    >
      选择
    </el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="searchData.page"
      :page-size="searchData.pageSize"
      layout="total, prev, pager, next"
      :total="searchData.totalPage"
    >
    </el-pagination>
    <!-- 策略明细弹框 -->
    <el-dialog
      :visible.sync="dialogVisible"
      v-if="dialogVisible"
      title="策略明细"
      :append-to-body="true"
    >
      <spot-futures-hedging
        :strategyInfo="multipleSelection"
        :closeValue="'check'"
        @closeMoule="closeMoule"
      ></spot-futures-hedging>
    </el-dialog>
  </d2-container>
</template>

<script>
import { strategyInfo } from "@/api/url_info.js";
import spotFuturesHedging_M from "./../model/spotFuturesHedging_M.vue";
export default {
  //选择策略
  name: "selectionStrategy",
  components: {
    "spot-futures-hedging": spotFuturesHedging_M
  },
  data() {
    return {
      multipleSelection: {},
      dialogVisible: false,
      searchData: {
        page: 1, //当前页
        pageSize: 20,
        totalPage: 0,
        strategy_name: "",
        strategy_id: "",
        name: "",
        status: "4",
        depart_name: "",
        strategy_type: "",
        strategy_objective: ""
      },
      options: [
        {
          value: "1",
          label: "现货期货套期"
        },
        {
          value: "2",
          label: "现货现货套期"
        },
        {
          value: "3",
          label: "现货期权套期"
        },
        {
          value: "7",
          label: "现货场外期权套期"
        },
        {
          value: "4",
          label: "期货期货套利"
        },
        {
          value: "5",
          label: "现货单边"
        },
        {
          value: "6",
          label: "期货单边"
        }
      ],
      tableData: [],
      flag: ""
    };
  },
  mounted() {
    this.strategyInfo();
    this.$fallback();
  },
  methods: {
    //关闭当前页面
    closePage() {
      let allPage = this.$store.getters["d2admin/page/allPage"],
        currentPage = this.$store.getters["d2admin/page/currentPage"];
      for (var i in allPage) {
        var fullPath = allPage[i].fullPath;
        if (currentPage == fullPath) {
          allPage.splice(i, 1);
        }
      }
    },
    // 机构
    orgFormat(row, column) {
      return row.org_name == null ? row.depart_name : row.org_name;
    },
    //网格信息
    strategyInfo() {
      this.listInfo();
      if (this.flag[0] == "tactics") {
        this.searchData.strategy_type = "146";
      } else if (this.flag[0] == "optionMatch_E") {
        this.searchData.strategy_type = "3";
      } else if (this.flag[0] == "spotMatch_E") {
        this.searchData.strategy_type = "12357";
      } else if (this.flag[0] == "overOptionMatch_E") {
        this.searchData.strategy_type = "7";
      }
      strategyInfo(this.searchData)
        .then(res => {
          this.tableData = [];
          let data = res.result.results;
          this.searchData.totalPage = res.result.count;
          for (let i = 0; i < data.length; i++) {
            this.tableData[i] = {
              status: data[i]["status"],
              org_name: data[i]["org_name"],
              depart_name: data[i]["depart_name"],
              strategy_name: data[i]["strategy_name"],
              strategy_id: data[i]["strategy_id"],
              strategy_type: data[i]["strategy_type"],
              strategy_objective: data[i]["strategy_objective"],
              max_occupation_funds: data[i]["max_occupation_funds"],
              loss_limit: data[i]["loss_limit"],
              profit_expectation: data[i]["profit_expectation"],
              risk_profit_ratio: data[i]["risk_profit_ratio"],
              expected_return_on_investment:
                data[i]["expected_return_on_investment"],
              strategy_hierarchy: data[i]["strategy_hierarchy"],
              strategy_formulate_date: data[i]["strategy_formulate_date"],
              strategy_start_date: data[i]["strategy_start_date"],
              strategy_end_date: data[i]["strategy_end_date"],
              creator_name: data[i]["creator_name"],
              hedging_method: data[i]["hedging_method"]
            };
          }
          if (this.flag[0] == "tactics") {
            this.searchData.strategy_type = "";
          } else if (this.flag[0] == "optionMatch_E") {
            this.searchData.strategy_type = "";
          } else if (this.flag[0] == "spotMatch_E") {
            this.searchData.strategy_type = "";
          } else if (this.flag[0] == "overOptionMatch_E") {
            this.searchData.strategy_type = "";
          }
        })
        .catch(err => {
          this.$message.error(err.msg);
        });
    },
    listInfo() {
      console.log("获取传过来的参数", this.$route.params.spotMatch);
      this.flag = this.$route.params.spotMatch;
    },
    clearType() {
      this.flag[0] = "";
    },
    //选择策略明细
    check() {
      if (this.multipleSelection.strategy_id) {
        this.dialogVisible = true;
      } else {
        this.$message({
          message: "请先选择一条信息",
          type: "warning"
        });
      }
    },
    //策略明细弹框
    closeMoule() {
      this.dialogVisible = false;
    },
    //查询
    search() {
      this.searchData.page = 1;
      this.strategyInfo();
    },
    // 每页数
    handleSizeChange(val) {
      this.searchData.pageSize = val;
      this.searchData.page = 1;
      this.strategyInfo();
    },
    // 当前页
    handleCurrentChange(val) {
      this.searchData.page = val;
      this.strategyInfo();
    },
    //选中的一行数据
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //选择
    chose() {
      let that = this;
      let datas = that.multipleSelection;
      if (datas.strategy_id) {
        if (that.flag[0] == "spotMatch_E") {
          that.$router.push({
            name: "spotMatch_E",
            params: { editList: datas }
          });
        } else if (that.flag[0] == "spotMatch_A") {
          that.$router.push({
            name: "spotMatch_A",
            params: { editList: datas }
          });
        } else if (that.flag[0] == "tactics") {
          that.$router.push({
            name: "tactics",
            params: { editList: datas }
          });
        } else if (that.flag[0] == "optionMatch_E") {
          that.$router.push({
            name: "optionMatch_E",
            params: { editList: datas }
          });
        } else if (that.flag[0] == "overOptionMatch_E") {
          that.$router.push({
            name: "overOptionMatch_E",
            params: { editList: datas }
          });
        } else {
          let choseDatas = [datas, "add"];
          that.$router.push({
            name: "profitAndLoss",
            params: { editList: choseDatas }
          });
        }
        this.closePage();
      } else {
        that.$message({
          message: "请选择一条数据",
          type: "warning"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.el-form-item {
  margin-bottom: 15px !important;
}
</style>
